<template>
    <section class="part2">
        <!-- Why Choose Wan Guo? -->
        <article
            v-if="false"
            id="about"
            class="why-choose">
            <div class="box">
                <h2 class="title">Why Choose Wan Guo?</h2>
                <div class="content">
                    Empowering every individual and business to master their money—spend, save,
                    invest, borrow, and manage—all with just a few clicks.
                </div>
            </div>
        </article>
        <!-- Are High Transfer Fees and Slow Transactions Holding You Back? -->
        <article
            v-if="false"
            class="transactions">
            <div class="box">
                <h2 class="title">
                    Are High Transfer Fees and Slow Transactions Holding You Back?
                </h2>
                <div class="content">
                    In today's global economy, sending money across borders shouldn't feel like a
                    gamble. Traditional remittance services are often plagued by hidden fees and
                    lengthy processing times, leaving you frustrated and out of pocket.
                </div>
            </div>
        </article>
        <!-- The Financial Burden of Outdated Systems -->
        <article
            v-if="false"
            class="financial-burden">
            <div class="box">
                <h2 class="title">The Financial Burden of Outdated Systems</h2>
                <div class="content">
                    Every time you send money internationally, you're faced with exorbitant fees
                    that chip away at your hard-earned savings. You deserve better—faster
                    transactions that won’t break the bank
                </div>
            </div>
            <img
                class="bg-img"
                src="/newHome/part2-3.png"
                alt="" />
        </article>
        <!-- The Benefits You’ll Love: -->
        <article
            v-if="false"
            class="benefits">
            <div class="title">The Benefits You’ll Love:</div>
            <div class="card-imgs">
                <div
                    v-for="item in benefits"
                    :key="item.content"
                    class="item">
                    <img
                        :src="isMobile ? item.mobileImg : item.img"
                        alt="" />
                    <div class="min-title">{{ item.content }}</div>
                </div>
            </div>
        </article>
        <!-- Contact Us -->
        <article
            id="contact"
            class="contact-us">
            <div class="box">
                <h2 class="title">Contact Us</h2>
                <div class="content">
                    We’re happy to hear you. Feel free to reach out with feedback, inquiries, and
                    collaboration opportunities.
                </div>
                <div class="form">
                    <div class="input-group">
                        <input
                            v-model.trim="form.name"
                            type="text"
                            placeholder="Your Name" />
                    </div>
                    <div :class="['input-group', !isEmailValid && 'error']">
                        <input
                            v-model.trim="form.email"
                            type="text"
                            placeholder="Your Email" />
                    </div>
                    <div class="input-group">
                        <input
                            v-model.trim="form.phone"
                            type="text"
                            placeholder="Your Telephone Number" />
                    </div>
                    <div class="textarea-group">
                        <textarea
                            v-model.trim="form.content"
                            placeholder="let us know how we can help you" />
                    </div>
                </div>
                <div
                    :class="['submit', isFormValid && isEmailValid && 'active']"
                    @click="onSubmit">
                    Submit
                </div>
            </div>
        </article>
        <!-- content-modal -->
        <div
            v-show="show"
            class="success-modal">
            <img
                src="/newHome/success.png"
                alt="" />
            <p class="success-text">Submit successfully</p>
        </div>
    </section>
</template>

<script lang="ts" setup>
    import { ref, computed } from 'vue';
    import { useWindowSize } from '@vueuse/core';
    import { request } from '@/api/index';

    const show = ref(false);

    // 使用 useWindowSize 来获取窗口大小
    const { width } = useWindowSize();
    // 初始化 isMobile 为 true
    const isMobile = ref(true);

    watch(width, () => {
        isMobile.value = width.value <= 768;
    });

    const form = ref({
        name: '',
        email: '',
        phone: '',
        content: '',
    });

    // 计算属性，判断对象所有属性是否都不为空
    const isFormValid = computed(() => {
        return Object.values(form.value).every(value => value.trim() !== '');
    });

    // 计算属性，验证邮箱格式
    const isEmailValid = computed(() => {
        if (form.value.email === '') {
            return true;
        }
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        return emailRegex.test(form.value.email);
    });

    function onSubmit() {
        if (!isFormValid.value || !isEmailValid.value) {
            return;
        }
        console.log(form.value);
        request(
            'https://gapi.gogoone.world/services/uaa/api/contact-us/save',
            'post',
            form.value
        )().then(res => {
            console.log(res);
            show.value = true;
            setTimeout(() => {
                show.value = false;
            }, 3000);
        });
    }

    // // 监听窗口大小变化
    // function handleResize() {
    //     isMobile.value = width.value <= 768;
    // }

    // // 初始化 isMobile
    // handleResize();

    // // 确保事件监听器仅在客户端添加
    // onMounted(() => {
    //     window.addEventListener('resize', handleResize);
    // });

    // // 在组件卸载时移除事件监听器
    // onUnmounted(() => {
    //     window.removeEventListener('resize', handleResize);
    // });

    const benefits = [
        {
            content: 'Experience peace of mind knowing your funds reach their destination quickly.',
            img: '/newHome/part2-4-1.png',
            mobileImg: '/newHome/m-part2-4-1.png',
        },
        {
            content: 'Save money on every transaction with our low fees.',
            img: '/newHome/part2-4-2.png',
            mobileImg: '/newHome/m-part2-4-2.png',
        },
        {
            content:
                'Enjoy a seamless user experience that allows for hassle-free transfers anytime, anywhere.',
            img: '/newHome/part2-4-3.png',
            mobileImg: '/newHome/m-part2-4-3.png',
        },
    ];
</script>

<style lang="scss" scoped>
    // 定义变量
    $width-full: 100%;
    $height-main: pxToRem(1080);
    $font-size-title: pxToRem(50);
    $font-size-content: pxToRem(28);
    $margin-bottom-title: pxToRem(30);
    $box-width: pxToRem(600);

    .part2 {
        overflow: hidden;
    }

    .why-choose {
        background: url('/newHome/part2-1.png');
    }

    .transactions {
        background: url('/newHome/part2-2.png');
    }

    .why-choose,
    .transactions {
        width: 100%;
        position: relative;
        height: $height-main;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .box {
        width: $box-width;
        position: absolute;

        .title {
            color: #000;
            font-size: $font-size-title;
            @extend .custom-font-black;
            margin-bottom: $margin-bottom-title;
        }

        .content {
            font-size: $font-size-content;
            opacity: 0.7;
            @extend .custom-font-lignt;
        }
    }

    .why-choose .box {
        top: pxToRem(423);
        left: pxToRem(400);
    }

    .transactions .box {
        top: pxToRem(327);
        left: pxToRem(1098);
    }

    .financial-burden {
        background-color: #f5f5f5;
        height: $height-main;
        position: relative;
        overflow: hidden;

        .box {
            top: pxToRem(249);
            left: pxToRem(396);
        }

        .bg-img {
            position: absolute;
            top: pxToRem(163);
            right: pxToRem(-128);
            width: pxToRem(988);
            height: pxToRem(497);
            object-fit: cover;
        }
    }

    .benefits {
        padding-bottom: pxToRem(80);

        .title {
            font-size: $font-size-title;
            font-weight: 1000;
            line-height: pxToRem(60);
            margin: 0 auto;
            text-align: center;
            margin-top: pxToRem(153);
            margin-bottom: pxToRem(85);
            @extend .custom-font-black;
        }
    }

    .card-imgs {
        display: flex;
        width: pxToRem(1316);
        justify-content: space-between;
        margin: 0 auto;

        .item {
            width: pxToRem(360);
            min-height: pxToRem(476);
            margin-right: pxToRem(40);
            font-size: pxToRem(32);
            font-weight: 700;
            line-height: pxToRem(32);
            text-align: center;
            color: #12141d;

            .min-title {
                font-size: pxToRem(24);
                font-weight: 400;
                line-height: pxToRem(26);
                color: #12141d;
                opacity: 0.7;
                margin-top: pxToRem(16);
            }

            img {
                width: pxToRem(412);
                height: pxToRem(545);
                border-radius: pxToRem(12);
                background: #d3d3d3;
                margin-bottom: pxToRem(30);
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }

    .contact-us {
        width: 100%;
        height: pxToRem(1080);
        display: flex;
        justify-content: center;
        .box {
            margin: pxToRem(141) auto;
            width: pxToRem(860);

            .title {
                font-size: pxToRem(30);
                font-weight: 700;
            }

            .content {
                font-size: pxToRem(22);
                opacity: 0.7;
                font-weight: 400;
            }

            .form {
                margin-top: pxToRem(60);
                .input-group {
                    padding: 0 pxToRem(20);
                    display: flex;
                    align-items: center;
                    justify-content: start;
                    background: #efefef;
                    width: 100%;
                    height: pxToRem(60);
                    margin-bottom: pxToRem(30);
                    border-radius: pxToRem(30);

                    &.error {
                        border: 1px solid #ff5252;
                    }

                    input {
                        width: 100%;
                        height: pxToRem(40);
                        border: none; /* 去除边框 */
                        background-color: transparent; /* 设置背景为透明 */
                        outline: none; /* 当输入框获得焦点时去除外轮廓线 */
                        caret-color: #e27049;
                        &::placeholder {
                            font-family: Arial, sans-serif; /* 自定义字体 */
                            font-size: pxToRem(14);
                        }
                    }
                }

                .textarea-group {
                    padding: pxToRem(20);
                    display: flex;
                    justify-content: start;
                    background: #efefef;
                    width: 100%;
                    height: pxToRem(210);
                    border-radius: pxToRem(30);
                    &.error {
                        border: 1px solid #ff5252;
                    }

                    textarea {
                        width: 100%;
                        height: pxToRem(200);
                        border: none; /* 去除边框 */
                        background-color: transparent; /* 设置背景为透明 */
                        outline: none; /* 当输入框获得焦点时去除外轮廓线 */
                        caret-color: #e27049;
                        &::placeholder {
                            font-size: pxToRem(15);
                            font-family: Arial, sans-serif; /* 自定义字体 */
                        }
                    }
                }
            }

            .submit {
                width: pxToRem(152);
                height: pxToRem(72);
                margin: pxToRem(60) auto 0;
                background: linear-gradient(84.82deg, #fd2aa5 0%, #fb7771 95.69%);
                opacity: 0.6;
                color: #fff;
                font-size: pxToRem(24);
                font-weight: 700;
                border-radius: pxToRem(50);
                padding: 0 pxToRem(40);
                display: flex;
                align-items: center;
                cursor: not-allowed;
                justify-content: center;

                &.active {
                    cursor: pointer;
                    opacity: 1;
                }
            }
        }
    }

    .success-modal {
        width: pxToRem(248);
        height: pxToRem(176);
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: pxToRem(20);
        text-align: center;
        position: fixed;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: pxToRem(22);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        img {
            margin-top: pxToRem(20);
            width: pxToRem(50);
            height: pxToRem(50);
        }
    }
    // 媒体查询开始
    @media (max-width: 1440px) {
        .why-choose .box {
            // 调整位置以适应较小的屏幕
            top: pxToRem(230); // 根据实际需要调整
            left: pxToRem(150); // 根据实际需要调整
        }

        .why-choose,
        .transactions {
            width: 100%;
            height: pxToRem(800);
            background-size: contain; /* 图片将保持其宽高比并完全显示在元素内 */
            background-repeat: no-repeat;
        }

        .transactions .box {
            // 调整位置以适应较小的屏幕
            top: pxToRem(140); // 根据实际需要调整
            left: pxToRem(800); // 根据实际需要调整
            width: pxToRem(500);
        }

        .financial-burden {
            height: pxToRem(800);
        }

        .financial-burden .box {
            // 调整位置以适应较小的屏幕
            top: pxToRem(200); // 根据实际需要调整
            left: pxToRem(200); // 根据实际需要调整
            width: pxToRem(600);
        }

        .financial-burden .bg-img {
            // 调整大小和位置以适应较小的屏幕
            width: pxToRem(600); // 根据实际需要调整
            height: pxToRem(300); // 根据实际需要调整
            top: pxToRem(230); // 根据实际需要调整
            right: pxToRem(-100); // 根据实际需要调整
        }

        .benefits .title {
            // 调整字体大小或位置以适应较小的屏幕
            font-size: pxToRem(40); // 根据实际需要调整
        }

        .card-imgs {
            // 调整宽度和间距以适应较小的屏幕
            width: pxToRem(1000); // 根据实际需要调整
            .item {
                width: pxToRem(300); // 根据实际需要调整
                min-height: pxToRem(400); // 根据实际需要调整
                margin-right: pxToRem(20); // 根据实际需要调整

                img {
                    width: pxToRem(312);
                    height: pxToRem(445);
                    border-radius: pxToRem(12);
                    background: #d3d3d3;
                    margin-bottom: pxToRem(30);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }

        .contact-us {
            // 调整整体布局和元素大小以适应较小的屏幕
            .box {
                width: pxToRem(700); // 根据实际需要调整
                .title {
                    font-size: pxToRem(24); // 根据实际需要调整
                }

                .content {
                    font-size: pxToRem(18); // 根据实际需要调整
                }

                .form {
                    .input-group,
                    .textarea-group {
                        padding: 0 pxToRem(15); // 根据实际需要调整
                        height: pxToRem(50); // 根据实际需要调整
                    }

                    .textarea-group {
                        padding-top: pxToRem(15);
                        height: pxToRem(180); // 根据实际需要调整
                    }
                }

                .submit {
                    width: pxToRem(120); // 根据实际需要调整
                    height: pxToRem(60); // 根据实际需要调整
                    font-size: pxToRem(20); // 根据实际需要调整
                }
            }
        }
    }

    // 1280 宽度适配
    @media (max-width: 1280px) and (min-width: 1025px) {
        .why-choose,
        .transactions {
            height: pxToRem(700);
            background-size: contain;
        }
        .why-choose .box {
            top: pxToRem(200);
            left: pxToRem(120);
            .title {
                font-size: pxToRem(42);
            }
            .content {
                font-size: pxToRem(24);
            }
        }
        .transactions .box {
            top: pxToRem(120);
            left: pxToRem(680);
            width: pxToRem(460);
            .title {
                font-size: pxToRem(42);
            }
            .content {
                font-size: pxToRem(24);
            }
        }

        .financial-burden {
            height: pxToRem(700);
            .box {
                top: pxToRem(160);
                left: pxToRem(140);
                width: pxToRem(560);
                .title {
                    font-size: pxToRem(42);
                }
                .content {
                    font-size: pxToRem(24);
                }
            }
            .bg-img {
                width: pxToRem(560);
                height: pxToRem(280);
                top: pxToRem(210);
                right: pxToRem(-100);
            }
        }

        .card-imgs {
            width: pxToRem(980);
            .item {
                width: pxToRem(280);
                min-height: pxToRem(420);
                img {
                    width: pxToRem(300);
                    height: pxToRem(420);
                }
            }
        }

        .contact-us {
            .box {
                width: pxToRem(640);
                .title {
                    font-size: pxToRem(26);
                }
                .content {
                    font-size: pxToRem(20);
                }
                .form {
                    .input-group {
                        height: pxToRem(54);
                        border-radius: pxToRem(28);
                    }
                    .textarea-group {
                        height: pxToRem(180);
                        border-radius: pxToRem(28);
                    }
                }
                .submit {
                    width: pxToRem(140);
                    height: pxToRem(64);
                    font-size: pxToRem(20);
                }
            }
        }
    }

    @media (max-width: 768px) {
        .why-choose {
            background: url('/newHome/m-part2-1.png');
        }

        .transactions {
            background: url('/newHome/m-part2-2.png');
        }
        .financial-burden {
            background: url('/newHome/m-part2-3.png');
        }

        .why-choose,
        .transactions,
        .financial-burden {
            width: 100%;
            height: pxToRem75(545); // 调整高度以适应移动端
            background-size: cover; // 图片将覆盖整个元素
            background-repeat: no-repeat;

            .box {
                width: pxToRem75(359);

                .title {
                    font-size: pxToRem75(30);
                    margin-bottom: pxToRem75(18);
                }
                .content {
                    font-size: pxToRem75(26);
                }
            }
        }

        .why-choose .box {
            // 调整位置以适应较小的屏幕
            top: pxToRem75(152); // 根据实际需要调整
            left: pxToRem75(40); // 根据实际需要调整
        }

        .transactions .box {
            // 调整位置以适应较小的屏幕
            top: pxToRem75(45); // 根据实际需要调整
            left: pxToRem75(365); // 根据实际需要调整
        }

        // .financial-burden {
        //     height: pxToRem75(400); // 调整高度以适应移动端
        // }

        .financial-burden .box {
            // 调整位置以适应较小的屏幕
            top: pxToRem75(76); // 根据实际需要调整
            left: pxToRem75(50); // 根据实际需要调整
            width: pxToRem75(320); // 调整宽度以适应移动端
        }

        .financial-burden .bg-img {
            display: none;
        }

        .benefits {
            padding-bottom: pxToRem75(100);
        }

        .benefits .title {
            margin: pxToRem75(60) 0;
            // 调整字体大小或位置以适应较小的屏幕
            font-size: pxToRem75(30); // 根据实际需要调整
            line-height: pxToRem75(0);
        }

        .card-imgs {
            // 调整宽度和间距以适应较小的屏幕
            width: 100%; // 调整为100%以适应移动端
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .item {
                margin-bottom: pxToRem75(86);
                width: pxToRem75(649); // 根据实际需要调整
                min-height: pxToRem75(497); // 根据实际需要调整
                margin-right: pxToRem75(10); // 根据实际需要调整

                img {
                    width: 100%; // 调整为100%以适应移动端
                    height: pxToRem75(395); // 调整为auto以保持图片比例
                    border-radius: pxToRem75(8);
                    background: #d3d3d3;
                    margin-bottom: pxToRem75(20);
                }
                .min-title {
                    margin: 0 auto;
                    width: pxToRem75(531);
                    margin-top: pxToRem75(20);
                    font-size: pxToRem75(30);
                    line-height: pxToRem75(35.8);
                }
            }
        }

        .contact-us {
            height: pxToRem75(1250);
            // 调整整体布局和元素大小以适应较小的屏幕
            .box {
                margin: pxToRem75(30) auto;
                width: pxToRem75(649); // 调整为100%以适应移动端
                padding: pxToRem75(20); // 添加内边距

                .title {
                    font-size: pxToRem75(30); // 根据实际需要调整
                    text-align: left; // 居中显示标题
                    margin-bottom: pxToRem75(10); // 添加底部间距
                }

                .content {
                    font-size: pxToRem75(28); // 根据实际需要调整
                    text-align: left; // 居中显示内容
                }
                .form {
                    margin-top: pxToRem75(60);
                    .input-group {
                        padding: 0 pxToRem75(20);
                        display: flex;
                        align-items: center;
                        justify-content: start;
                        background: #efefef;
                        width: pxToRem75(609);
                        height: pxToRem75(80);
                        margin-bottom: pxToRem75(30);
                        border-radius: pxToRem75(40);

                        &.error {
                            border: 1px solid #ff5252;
                        }

                        input {
                            width: pxToRem75(609);
                            height: pxToRem75(40);
                            border: none; /* 去除边框 */
                            background-color: transparent; /* 设置背景为透明 */
                            outline: none; /* 当输入框获得焦点时去除外轮廓线 */
                            caret-color: #e27049;
                            &::placeholder {
                                font-family: Arial, sans-serif; /* 自定义字体 */
                                font-size: pxToRem75(24);
                            }
                        }
                    }

                    .textarea-group {
                        padding: pxToRem75(20);
                        display: flex;
                        justify-content: start;
                        background: #efefef;
                        width: pxToRem75(609);
                        height: pxToRem75(210);
                        border-radius: pxToRem75(30);
                        &.error {
                            border: 1px solid #ff5252;
                        }

                        textarea {
                            width: pxToRem75(609);
                            height: pxToRem75(200);
                            border: none; /* 去除边框 */
                            background-color: transparent; /* 设置背景为透明 */
                            outline: none; /* 当输入框获得焦点时去除外轮廓线 */
                            caret-color: #e27049;
                            &::placeholder {
                                font-size: pxToRem75(26);
                                font-family: Arial, sans-serif; /* 自定义字体 */
                            }
                        }
                    }
                }

                .submit {
                    width: pxToRem75(300);
                    height: pxToRem75(96);
                    margin: pxToRem75(60) auto 0;
                    background-color: #e27049;
                    opacity: 0.6;
                    color: #fff;
                    font-size: pxToRem75(38);
                    font-weight: 700;
                    border-radius: pxToRem75(80);
                    padding: 0 pxToRem75(40);
                    display: flex;
                    align-items: center;
                    cursor: not-allowed;
                    justify-content: center;

                    &.active {
                        cursor: pointer;
                        opacity: 1;
                    }
                }
            }
        }
    }

    /* 对于某些旧版浏览器的支持 */
    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
        font-size: pxToRem(14);
        font-family: Arial, sans-serif;
    }

    input::-ms-input-placeholder,
    textarea::-ms-input-placeholder {
        font-size: pxToRem(14);
        font-family: Arial, sans-serif;
    }
</style>
